<template>
    <div class="pay">
        <!-- <div class="title">
            <h1>支付订单</h1>
        </div> -->
        <x-header style="background-color:#000;">支付订单
            <!-- <router-link to="/register" slot="right">注册</router-link> -->
            <!-- <a slot="right">注册</a> -->
        </x-header>
        <div class="pay-address">
            <div>
                <p class="main-address-per">账户:<span>{{username}}</span></p>
                <!-- <p class="main-address-tel">15985698749</p> -->
            </div>
            <!-- <p>收货地址:<span>河南省郑州市中原区秦岭路8号院59号单元28层15号东户第三家</span></p> -->
        </div>

        <div class="pay-product">
            <ul v-if="!confirm">
                <li v-for="k in carList">
                <a>
                    <!-- <img src="https://img.alicdn.com/imgextra/i3/2171367772/TB2gl0VaDdYBeNkSmLyXXXfnVXa_!!2171367772.jpg" alt="商品详情"> -->
                    <img :src="k.img" alt="">
                    <div>
                        <h4>
                            <span style="color:#ee7150">商品名称： {{k.title}}</span>
                        </h4>
                        <h4>
                            <span>商品规格：{{k.size}}</span>
                        </h4>
                        <p>{{k.nowPrice * k.numbers}} 元</p>
                    </div>
                </a>
                </li>
            </ul>

            <!-- 支付成功后弹出的提示框 -->
            <div v-transfer-dom>
                <confirm v-model="show"
                @on-confirm="onConfirm2"
                title="友情提示">
                    <p style="text-align:center;">支付成功！</p>
                </confirm>
            </div>
        </div>
        <h3 class="pay-allpay">总需要支付 : <i>￥</i><span>{{ totalPrice }}</span></h3>
        <footer class="pay-footer" @click="test()">
            <span>立即支付</span>
        </footer>

    </div>
</template>

<script>
    import {Confirm,TransferDomDirective as TransferDom} from 'vux'
    import api from '../api/cart.js'
    import {XHeader} from 'vux'
    export default {
        data() {
            return {
                show: false,
                confirm: '',
                totalPrice: 0
            }
        },
        computed: {
            // this.$store.state.details.
            carList() {
                return this.$store.state.details.accountList    
            },
            username(){
                return JSON.parse( sessionStorage.getItem('userInfo')).username
            }
        },
        components: {
            Confirm,XHeader
        },
        directives: {
            TransferDom
        },
        methods: {
            onConfirm2() {
                this.$router.push({path: '/home/order'})
            },
            test() {
                this.show = true

                // console.log(JSON.parse(this.carList))
                let carList2 = []
                for(let i = 0;i < this.carList.length; i++) {
                    carList2[i] = {
                        uid: 1,
                        pid: 2,
                        cstock: this.carList[i].numbers,
                        caprice: this.carList[i].nowPrice,
                        csize: this.carList[i].size,
                        cstatus: '未支付',
                        cid:this.carList[i].cid
                    }
                }
                let buy = JSON.stringify(carList2)
                console.log(buy)
                 api.postBuyList((res) => {
                    console.log("success");
                    console.log(res);
                }, err => {}, buy)
            }
        },
        mounted() {
            this.totalPrice = this.$route.params.total   
        }
    }
</script>

<style lang="less" scoped>
    .pay {
        width: 100%;
        background-color: #f7f7f7;

    .title{
        display: flex;
        justify-content: center;
    }
    .pay-address {
        background-color: #fff;
        border-bottom: 1 * 10vw/75 solid #dedede;
        padding: 30 * 10vw/75;

        > div {
        display: flex;
        justify-content: space-between;

        p {
            color: #868686;
        }
        }

        > p {
        color: #868686;
        padding-top: 30 * 10vw/75;
        letter-spacing: 3 * 10vw/75;
        line-height: 45 * 10vw/75;
        }
    }
    .pay-product {
        background-color: #fff;
        height: 100vw;
        overflow: auto;

        li {
        a {
            display: flex;
            box-sizing: border-box;
            padding: 20 * 10vw/75 30 * 10vw/75;
            color: #4d4d4d;
            border-bottom: 1 * 10vw/75 solid #dedede;

            > img {
                display: block;
                width: 2.5 * 10vw;
                height: 2.5 * 10vw;
            }

            > div {
                box-sizing: border-box;
                padding-left: 50 * 10vw/75;
                width: 70%;
            h2 {
                padding-top: 0.09 * 10vw;
                overflow: hidden;
                word-break: keep-all;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            p {
                text-align: right;
                padding-top: 1.4 * 10vw;
            }
            }
        }
        }
    }

    .pay-allpay {
        text-align: right;
        margin-top: 6vw;
        padding: 4vw 5vw;
        color: #999999;
        background-color: #fff;
        i,
        span {
            
        }
    }

    .pay-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-bottom: 4vw;
        span {
            display: block;
            width: 85%;
            background-color: #fd729c;
            border-radius: 1.3vw;
            color: #fff;
            font-size: 17px;
            padding: 4vw;
            margin: 0 auto;
            text-align: center;
            &:active {
                
            }
        }
    }

    .pay-confirm {
        padding: 20px 0;
        text-align: center;
        color: #fff;
        line-height: 30px;
    }
    }
</style>